<?php
session_start();
session_unset();
include('includes/db/sql.functions.php');
ob_start();
$query=get_all_biobits();
//Tenemos un array q tiene la clave 'query' y como valor otro array. Este es un array con 4 posiciones, una para cada biobit. Cada    	biobit es un array con 3 campos (clave, valor = atributo, valorAtributo)
$biobits = array(); //aqui va un array con un array por cada biobit
foreach($query as $q){
	$biobits = $q;
}
$query2 = get_all_hw();
$hwss = array(); //aqui va un array con un array por cada biobit
foreach($query2 as $h){
	$hwss = $h;
}
$query3 = get_all_genes();
$genes = array(); //aqui va un array con un array por cada biobit
foreach($query3 as $h){
	$genes = $h;
}

if($_GET[success]){
	echo "<div class='ui-widget'>
			<div class='ui-state-highlight ui-corner-all' style='margin-top: 20px; padding: 0 .7em;'> 
				<p><span class='ui-icon ui-icon-info' style='float: left; margin-right: .3em;'></span>
				New $_GET[success] added successfuly</p></div>
		</div>";
	echo "<div><div>";
}
?>

<p>Welcome to main part related to wires! Here you could do many things like:</p>
<ul>
	<li style="margin-left:30px;">Look all the information of a wire, halfwire or gen</li>
	<li style="margin-left:30px;">Add new wires, halfwires or genes.</li>
</ul>


<!-- HELP <button id="help" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" ><span class="ui-button-text">Help</span></button> 
<div id="helpdiv" style="width:1800px;position:absolute;z-index:5;"></div>
<script>
$("#help").click(function(){

	$("#helpdiv").css({"background-image":"url('images/helps/wires.png')","height":"200px"});
})
</script>
-->

<div id="accordion1" class="accord">
<h5><a href="#">Wires</a></h5>

<div id="biobitscomplete"><!-- TODO: Poner el filtro ordenado en un cuadro a la derecha. Poner en cada section con div diferente.  -->
<div class="cuadroFiltros">
<form name="filters">
	<input type="checkbox" name="porC" id="porCBB">Starts with c<br/>
	</input> <input type="checkbox" name="porP" id="porPBB">Starts with p<br/>
	</input> <input type="checkbox" name="porP" id="allBB"> All </input><br/>
</form>
<a href="searchbiobit.php">
<button class="botonMolon"  >Add new Wire</button>
</a>
</div>
<div id="biobits"><?php
foreach($biobits as $bb){ //recorro cada biobit
	$bb_name = $bb[bb_name]; //obtengo el nombre
	echo "<a style='padding-right: 20px;' href='biobit.php?bb=$bb_name'>$bb_name</a>"; //creo el enlace
}
if(empty($biobits)){
	echo "<p>We're expecting new wires. Add the first one!</p>";
}
?>
</div></div></div>
</br>
<!-- orders section -->
<div id="accordion2" class="accord">
<h5><a href="#">Half wires</a></h5>
<div>
<div>
<?php   
foreach($hwss as $h){
	$hws_name = $h[hws_name];
	echo "<a style='padding-right: 20px;' href='hws.php?send=$hws_name'>$hws_name</a>";
}
if(empty($hwss)){
	echo "<p>We're expecting new half-wires. Add the first one!</p>";
}
?></div>
<a  href="addWire.php">
<button style="margin-top:10px;" class="botonMolon">Add new half-wire</button>
</a>

</div>

</div>
</br>
<!--  section 3 -->
<div id="accordion3" class="accord">
<h5><a href="#">Genes</a></h5>
<div>

<div><?php   
foreach($genes as $h){
	$g_name = $h[g_name];
	echo "<a style='padding-right: 20px;' href='gene.php?send=$g_name'>$g_name</a>";
}
if(empty($genes)){
	echo "<p>We're expecting new genes. Add the first one!</p>";
}
?>

</div>
<a href="newGen.php">
<button style="margin-top:10px;" class="botonMolon">Add new gene</button>
</a>
</div>

</div>

<script type="text/javascript">

$(function() {
    $('#accordion1').accordion({
        header: 'h5',
        collapsible: true,
        autoHeight: false
    });
});
$(function() {
    $('#accordion2').accordion({
        header: 'h5',
        collapsible: true,
        autoHeight: false,
        active: false
    });
});
$(function() {
    $('#accordion3').accordion({
        header: 'h5',
        collapsible: true,
        autoHeight: false,
        active: false
    });
});
$(function() {
    $('#accordion4').accordion({
        header: 'h5',
        collapsible: true,
        autoHeight: false,
        active: false
    });
});

</script>

<script type="text/javascript">
$(document).ready(function() {
	var biobits;
})

function expandAll() {
    $("#accordion1, #accordion2, #accordion3, #accordion4")
        .filter(":not(:has(.ui-state-active))")
        .accordion("activate", 0);
}

function collapseAll() {
    $("#accordion1, #accordion2, #accordion3, #accordion4")
        .filter(":has(.ui-state-active)")
        .accordion("activate", -1);
}

</script>



<!-- Filtros: hay que recolectar los valores de los checkbox, e ir realizando querys -->


<?php
echo "<script>

        $(function() {
                biobits = [";

foreach($query['query'] as $clave => $valor){
	$a=$query['query'][$clave]['bb_name'];
	$otroarry =end($query['query']);
	if($otroarry['bb_name']==$a ){
		echo  "'".$a."'";

	}else{
		echo "'".$a."'".",";

	}
}
echo "];});</script>";

?>


<script type="text/javascript">
   $('input[type=checkbox]').change(function(event){       
		var c=$('#porCBB').is(':checked');
		var p=$('#porPBB').is(':checked');
		var all=$('#allBB').is(':checked');
		var selection = {'c':c, 'p':p, 'all':all}; //aqui tengo el valor booleano de los 3 checkbox
		var res="";
		
		//Que empiece por C
		var pattC=/^C/i;
		
		//Que empiece por P
		var pattP=/^P/i;
		

	    for(bb in biobits){
	    	var name = biobits[bb];
	    	var cres=pattC.test(name);
	    	var pres=pattP.test(name);
			
			if(all){
			    res+="<a style='padding-left:20px;' href='biobit.php?bb="+name+"'>"+name;
			}else{
				if(cres && c){
				res+= "<a style='padding-left:20px;' href='biobit.php?bb="+name+"'>"+name;
				}
				if(pres && p){
				res+= "<a  style='padding-left:20px;' href='biobit.php?bb="+name+"'>"+name;
				}
			}
		}

		$("#biobits").html(res);
      return false;
   });
   

  </script>





<?php
$content= ob_get_contents();
ob_end_clean();
include_once('template.php');
?>
